<script setup lang="ts">
import BaseBarLineScatterChart from '@/components/chart/bar-line-scatter-chart/BaseBarLineScatterChart.vue'
import type { BarLineScatterChartOption } from '@/components/chart/bar-line-scatter-chart/util/BarLineScatterChartBuilder'
import type { ECElementEvent } from 'echarts/core'
import { nextTick, onMounted, ref } from 'vue'
import type { ComponentExposed } from 'vue-component-type-helpers'

type BaseBarLineScatterChartComponentExposed = ComponentExposed<typeof BaseBarLineScatterChart>
const BaseBarLineScatterChartRef = ref<BaseBarLineScatterChartComponentExposed>()
const configOption: BarLineScatterChartOption = {
  yAxisOption: {
    leftYAxisOption: {
      showXArrow: true,
      name: '产量'
    },
    rightYAxisOption: {
      stufix: '%',
      name: '达成率'
    }
  },
  xAxisOption: {
    xAxisData: ['星期一\n2024-01-01', '星期二', '星期三'],
    color: 'red',
    showArrow: true
  },
  // value, _source, itemColor, labelColor, position(bottom,top: 控制柱子显示方向)
  seriesOptionArr: [
    {
      name: '产量',
      type: 'bar',
      labelColor: 'yellow',
      labelPosition: 'top',
      barMaxWidth: 60,
      data: [
        {
          value: -10,
          itemStyle: {
            color: 'red'
          },
          label: {
            color: 'green',
            position: 'bottom'
          }
        },
        20,
        100
      ]
    },
    { name: '达成率', type: 'line', data: [100, 80], yAxisIndex: 1 }
  ]
}
function onChartClick(evt: ECElementEvent) {
  console.log(evt)
}

onMounted(() => {
  nextTick(() => {
    BaseBarLineScatterChartRef.value?.showTip(0, 0)
  })
})
</script>

<template>
  <main class="h-full w-full">
    <BaseBarLineScatterChart
      :config-option="configOption"
      @chartClick="onChartClick"
      ref="BaseBarLineScatterChartRef"
    ></BaseBarLineScatterChart>
  </main>
</template>
